<template>
	<div>
		<ul class="list">
			<li
				v-for="item of alphabetList" 
				:key="item.id"
				@click="handleLetterClick"
			>{{item.content}}</li>
		</ul>
		<div class="connect" ref="distance" :style="hidden">
			{{this.content}}
		</div>
	</div>
</template>

<script>

export default {
  name: 'locationAlphabet',
  props:{
	  alphabetList:Array            //这里接收父组件传过来的alphabetList值
  },
  methods:{
	  handleLetterClick(e){
		  this.content = e.target.innerText
		  // console.log(this.content )
		  this.$emit("change",this.content)       //把子组件中的信息this.content传给父组件
		  for(let i=0;i<this.alphabetList.length;i++){
			  if(this.content === this.alphabetList[i].content){
				  let distance = 1.1 + ((1+i)*0.35)
				  const showElement = this.$refs.distance
				  showElement.style = "display:block"
				  showElement.style = "top:"+distance+"rem"
				  setTimeout(function(){
					  showElement.style = "display:none"
				  },500)
			  }
		  }
	  }
  },
  data(){
	  return{
		  hidden:{
			  display:'none'
		  },
		  // alphabetList:Array,
		  content:''
	  }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.list
	position:fixed
	top:1.3rem
	right:0
	text-align:center 
	background:#eff1f5
	width:18% 
	padding-bottom:100rem
	opacity:.7
	color:#7ec9ca
	// z-index:100 
.list>li
	margin:.1rem 0
	font-weight:bold 
.connect
	position:absolute
	top:1.3rem
	right:1.4rem
	text-align:center 
	background:rgba(80,180,0,0.7)
	border-radius:.07rem 
</style>
